<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./dolist.css">
    <title>base4</title>
</head>

<body>
    <div class="header">
        <div class="logo">
            <div class="logo_title">
                myToDoList
            </div>
            <div class="logo_input">
                <input type="text" placeholder="请输入日程" class="logo_input_main" id="logo_input_main">
            </div>
        </div>
    </div>
    <div class="body">
        <div class="body_main">
            <div class="body_pre">
                <p class="body_text">正在进行</p>
                <span class="body_num1">0</span>
            </div>
            <ul id="add">
            </ul>
            <div class="body_end">
                <p class="body_text">已经完成</p>
                <span class="body_num2">0</span>
            </div>
            <ul id="end">
            </ul>
        </div>
    </div>
    <div class="footer">
        I CAN ONLY TRY MY BEST
    </div>
    <script src="./template-web.js"></script>
    <script id="waitDo" type="text/html">
        {{if isWork}}
        <div class="body_pre">
            <p class="body_text">正在进行</p>
            <span class="body_num1">{{num1}}</span>
        </div>
        <ul id="add">
            {{each list value i}} {{if value.hasDo == false}}
            <li style="position:relative;" index="{{value.index}}">
                <input type="checkbox" class="addbox"> {{if value.isWrite == false}}
                <p class="convert"> {{value.content}} </p>
                {{/if}} {{if value.isWrite == true}}
                <input type="text" value="{{value.content}}" class="away"> {{/if}}
                <span class="body_hide">------ </span>
            </li>
            {{/if}} {{/each}}
        </ul>
        {{/if}}
    </script>
    <script id="hasDone" type="text/html">
        {{if isWork}}
        <div class="body_end">
            <p class="body_text">已经完成</p>
            <span class="body_num2">{{num2}}</span>
        </div>
        <ul id="end"> {{each list value i}} {{if value.hasDo == true}}
            <li style="position:relative;" index="{{value.index}}">
                <input type="checkbox" class="addbox" checked> {{if value.isWrite == false}}
                <p class="convert"> {{value.content}} </p>
                {{/if}} {{if value.isWrite == true}}
                <input type="text" value="{{value.content}}" class="away"> {{/if}}
                <span class="body_hide">------ </span>
            </li>
            {{/if}} {{/each}}
        </ul>{{/if}}
    </script>
    <script>
        (function () {
            var storage = window.localStorage;
            var name = JSON.parse(storage.getItem('key'));
            var data = {
                num1: 0,
                num2: 0,
                isWork: true, // 修改可以使这个函数工作与不工作
                list: name || [] //空的数组，等会存放我的信息 list里面有三个三个对象  
                //一个是isWrite 是否可写，一个是content一个是 是否已经完成
            };
            extra();
            //判断要添加的待办事项是否已经存在，如果是，告诉他不可以添加
            function pushObj(msg) {
                var flag;
                for (var i of data.list) {
                    if (i.content == trim(msg)) {
                        flag = false;
                        break;
                    }
                }
                if (flag == false) {
                    alert("你要做的事情已经在待办事项中了哦，请确认是否重复");
                } else {
                    data.list.push({
                        content: msg,
                        hasDo: false,
                        isWrite: false,
                        index: 0
                    })
                    // reIndex();
                    extra();
                }
            }
            //将字符串头和尾的空格都删掉
            function trim(str) {
                return str.replace(/(^\s*)|(\s*$)/g, "");
            }
            //检查字符串，如果字符串是空或者全是空格就alert，
            function textExame(msg) {
                var flag = true;
                if (msg.match(/^\s*$/)) {
                    alert("你还没有输入内容或者输入全是空格哦");
                    flag = false;
                }
                return flag;
            }
            //页面渲染。
            function render() {
                var html1 = template('waitDo', data);
                var html2 = template('hasDone', data);
                document.getElementsByClassName("body_main")[0].innerHTML = html1 + html2;

            }
            //计算数量
            function count() {
                var num1 = 0,
                    num2 = 0;
                for (let i of data.list) {
                    if (i.hasDo == false) {
                        num1++;
                    } else {
                        num2++;
                    }
                }
                data.num1 = num1;
                data.num2 = num2;
            }
            //重新绑定索引
            function reIndex() {
                for (var i = 0; i != data.list.length; i++) {
                    data.list[i].index = i;
                }
            }
            //重新索引，渲染，计数
            function extra() {
                reIndex();
                count();
                render();
                save();
            }

            function save() {
                if (!window.localStorage) {
                    alert("浏览器支持localstorage");
                } else {
                    storage.setItem('key', JSON.stringify(data.list))
                }
            }
            //check
            function check() {
                if (document.getElementsByClassName("away").length != 0){
                        var biao;
                        for (var i = 0 ; i != data.list.length; i++) {
                            if (data.list[i].isWrite == true) {
                                biao = i;
                            }
                        }
                        data.list[biao].content = document.getElementsByClassName("away")[0].value;
                        data.list[biao].isWrite = false;
                            extra();
                    }
            }
            //绑定函数
            function bindEvent() {
                //对文本框的输入绑定函数，如果有重复 ，空格，或者没有输入会报错，否则直接加入数组中
                var inputtext = document.getElementById("logo_input_main");
                inputtext.addEventListener("keypress", function () {
                    var target = event.target;
                    if (event.keyCode == 13) {
                        var sure = textExame(target.value);
                        if (sure) {
                            pushObj(trim(target.value));
                            document.getElementById("logo_input_main").value = "";
                            render();
                            count();
                            save();
                        }
                    }
                });
                var dele = document.getElementsByClassName("body_main")[0];
                dele.addEventListener("click", function () {
                    var target = event.target;
                    var index = target.parentNode.getAttribute("index");
                    if (target.nodeName == "SPAN") {
                        check();
                        var x = data.list.splice(index, 1);
                        extra();
                    }
                    if (target.nodeName == "INPUT" && target.className == "addbox") {
                        check();
                        var x = data.list.splice(index, 1);
                        data.list.push({
                            content: x[0].content,
                            hasDo: !x[0].hasDo,
                            isWrite: x[0].isWrite,
                            index: 0
                        })
                        extra();
                    }
                    if (target.nodeName == "P" && target.className == "convert") {
                        check();
                        data.list[index].isWrite = true;
                        extra();
                        document.getElementsByTagName("li")[index].getElementsByClassName("away")[0].addEventListener("blur", function () {
                            data.list[index].content = trim(document.getElementsByTagName("li")[index].getElementsByClassName("away")[0].value);
                            data.list[index].isWrite = false;
                            extra();
                        })
                    }
                })
            }

            function init() {
                bindEvent();
            }
            init();
        })();
    </script>
</body>

</html>